{{define "index"}}
    {{template "layout/header" .Header}}
    {{template "layout/left" .}}
    <div class="main-wrapper">
        <section class="blog-list px-3 py-5 p-md-5">
            <div class="container">
                {{- range $index, $item := .Paginate.Data -}}
                <div class="item shadow {{if gt $index 0 }}mt-4{{end}}">
                    <div class="media p-4">
                        <div class="media-body d-block">
                            <h3 class="title mb-1"><a href="/detail/{{$item.ID}}">&nbsp;{{$item.Title}}</a></h3>
                            <div class="meta mb-2 mt-2"><span class="date"><i class="fa fa-calendar">&nbsp;</i>{{.CreatedAt}}</span><span class="time"><i class="fa fa-eye"></i>&nbsp;{{.ViewNum}}</span><span class="comment"><a href="/detail/{{$item.ID}}#comments">1 comment</a></span></div>
                            <div class="intro ">{{$item.Introduction}}...</div>
                            <a class=" btn more-link" href="/detail/{{$item.ID}}" title="{{setLinkTitle $item.Title}}">Read more &rarr;</a>
                            <div class="d-block text-dark mt-3 mb-3">
                                <i class="fa fa-tags"></i>
                                {{$tags := tagString2Map $item.Tags}}
                                {{range $i, $t := $tags}}
                                    <span class="badge badge-info ml-2"><a href="/tags/title/{{$t}}" class="text-white" target="_blank" title="{{$t}}">{{$t}} &nbsp;</a></span>
                                {{end}}
                            </div>
                        </div>
                    </div>
                </div>
                {{- end -}}
                {{- with .Paginate -}}
                    {{template "layout/pagination" .}}
                {{- end -}}
            </div>
        </section>
        {{template "layout/section_footer"}}
    </div>
{{- template "layout/footer" -}}
{{end}}